<template>
  <div class="container mx-auto px-4 py-8 max-w-3xl">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-3xl font-bold text-gray-800">Vue3 TodoList</h1>
      <a href="https://gitee.com/luren98/component-based-todo.git" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
        <i class="fa fa-github mr-2"></i> 代码仓库
      </a>
    </div>
    
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
      <TodoForm @add-todo="addTodo" />
    </div>
    
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
      <FilterButtons @filter-todos="filterTodos" />
      <TodoList :todos="filteredTodos" @toggle-todo="toggleTodo" @delete-todo="deleteTodo" @edit-todo="editTodo" />
    </div>
    
    <div class="bg-white rounded-xl shadow-lg p-6">
      <Stats :todos="todos" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TodoForm from './components/TodoForm.vue'
import FilterButtons from './components/FilterButtons.vue'
import TodoList from './components/TodoList.vue'
import Stats from './components/Stats.vue'

interface Todo {
  id: number
  title: string
  completed: boolean
  createdAt: Date
}

const todos = ref<Todo[]>([
  { id: 1, title: '学习Vue3组件化开发', completed: true, createdAt: new Date('2023-10-01') },
  { id: 2, title: '完成TodoList项目', completed: false, createdAt: new Date('2023-10-02') },
  { id: 3, title: '添加TypeScript支持', completed: false, createdAt: new Date('2023-10-03') }
])

const filter = ref('all')

const filteredTodos = computed(() => {
  switch(filter.value) {
    case 'active':
      return todos.value.filter(todo => !todo.completed)
    case 'completed':
      return todos.value.filter(todo => todo.completed)
    default:
      return todos.value
  }
})

const addTodo = (newTodo: Todo) => {
  todos.value = [newTodo, ...todos.value]
}

const toggleTodo = (id: number) => {
  todos.value = todos.value.map(todo => 
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  )
}

const deleteTodo = (id: number) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
}

const editTodo = (id: number, updatedTitle: string) => {
  todos.value = todos.value.map(todo => 
    todo.id === id ? { ...todo, title: updatedTitle } : todo
  )
}

const filterTodos = (newFilter: string) => {
  filter.value = newFilter
}
</script>

<style scoped>
.container {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
  